<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_6w5nm2ts7zaor.css">
    <link rel="icon" type="image/x-icon" href="">
    <title>GeoHey|极海云</title>
    <style >
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        input{
            padding: 0;
            display: block;
            width: 298px;
            height: 40px;
            background: #f9f9f9;
            margin: 0 auto 20px auto;
            border: 1px solid rgba(0, 24, 44, 0.15);
            border-radius: 5px;
            -webkit-appearance : none ; 
            -webkit-border-radius: 5px;
        }
        input:focus{
            outline: none;
        }
        .input{
            text-indent: 1em;
            font-size: 14px;
        }
        .submit {
            background: #1D8CE0;
            color: #fff;
            text-align:center;
            cursor: pointer;
        }
    	#app {
		    width: 100%;
		    height: 100%;
            font-size: 14px;
		}
        .reset-pwd-page{
            height: 100%;
            width: 100%;
            min-height: 350px;
            position: relative;
            overflow: hidden;
            display: table;
        }
        .center-wrapper{
            width: 100%;
            position: relative;
            height: 500px;  
            display: table-cell;
            vertical-align: middle
        }
        .reset-pwd-wrapper{
            height: 500px;
            width: 40%;
            min-width: 300px;
            margin: 0 auto;
        }    

	   .email-name{
            padding: 10px 20px;
            margin: 0 auto;
            text-align: center;
        }
       
        hr{
            width: 65%;
            margin: 20px auto;
            border-top: 1px solid #000;
            min-width: 300px;
        }
        .hide{
            display: none;
        }
        .wrong-input{
            border: 1px solid #d9534f;
        }
        .tip{
            color: #d9534f;
            font-size: 12px;
            width: 300px;
            margin: 0 auto 20px auto ;
            padding-left: 10px;
        }
        .disabled{
            pointer-events: none;
            cursor: not-allowed;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            box-shadow: none;
            opacity: .65;
            -khtml-opacity: 0.65;
        }

        .back-to-sign{
            margin-top: 50px;
            padding: 16px;
            background: #1D8CE0;
            height: 130px;
            color: #fff;
            text-align: center;
        }
        .back-to-sign-text{
            height: 55px;
        }

        .btn-wrapper{
            margin: 0 auto;
        }  
        .btn-sign{
            white-space: nowrap;
            cursor: pointer;
            background-color: #f7ba2a;
            border: 1px solid #f7ba2a;
            margin: 0;
            border-radius: 4px;
            padding: 0 12px;
            height: 28px;
            line-height: 26px;
            color: #fff;
        }
        .btn-sign:focus,
        .btn-sign:hover {
            background: #f9c855;
            border-color: #f9c855;
            color: #fff;
        }
        #noty_topCenter_layout_container li{
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !important;
            padding: 5px 12px;
            box-sizing: border-box;
            border-radius: 2px;
            background-image: none !important;
            background-color: #fff !important;
            overflow: hidden;
            -webkit-appearance : none ; 
            -webkit-border-radius: 2px;
            border: none !important;
        }
        .noty_message {
            font-weight: normal !important;
        }
        .error{
            color: #d9534f !important;
        }
        .success{
            color: #3dbf74 !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <script>
            window[ 'geohey_order_email' ] = '{{ email }}';
            window[ 'geohey_order_key' ] = '{{ key }}';
        </script>
        <div class="reset-pwd-page">
            <div class="center-wrapper" >
                <div class="reset-pwd-wrapper" >
	                <div class="reset-pwd-content">
                        {% if status == "valid" %}
                        <div class="email-name">为账户{{email}}重置密码</div>
                        <hr>
                        <input type="password" class="input" id="pwd1" placeholder="请输入新密码">
                        <p  class="tip hide" id="tipEmptyPwd">密码不能为空</p>
                        <p  class="tip hide" id="tipWrongPwd" >密码至少为6位</p>
                        <input type="password" class="input" id="pwd2" placeholder="请再次输入新密码">
                        <p  class="tip hide" id="tipNotSamePwd">两次密码不一致</p>
	                    <input type="button" class="submit" id="resetBtn" value="确定重置">
                        {% else %}
                        <div class="back-to-sign">
                            <p class="back-to-sign-text">该重置密码请求不存在或已被处理</p>
                            <div class="btn-wrapper">
                                <button class="btn-sign" type="warning" onclick="location.href ='/sign'">返回登录页面</button>
                            </div>
                        </div>
                        {% endif %}
	                </div>
	            </div>
            </div> 
        </div>
    </div>
    <script type="text/javascript" src="static/libs/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="static/libs/sha1.js"></script>
    <script type="text/javascript" src="static/libs/jquery.noty.packaged.min.js"></script>
    <script>
        var regPwd = /^.{6,}$/;
        var ensurePwdEnable = function(){
            var pwd1 = $.trim( $( "#pwd1" ).val() );
            if(  pwd1.length === 0 ){
                $("#tipEmptyPwd").removeClass("hide");
                $("#pwd1").addClass("wrong-input");
            }else{
                $("#tipEmptyPwd").addClass("hide");
                $("#pwd1").removeClass("wrong-input");
            }
            if( !regPwd.test( pwd1 ) ){
                $("#tipWrongPwd").removeClass("hide");
                $("#tipEmptyPwd").addClass("hide");
                $("#pwd1").addClass("wrong-input");
            }else{
                $("#tipWrongPwd").addClass("hide");
                $("#pwd1").removeClass("wrong-input");
            }
        };
        var ensureSamePwd = function(){
            var pwd1 = $.trim( $( "#pwd1").val() );
            var pwd2 = $.trim( $( "#pwd2" ).val() );
            if( pwd1 !== pwd2){
                $( "#tipNotSamePwd" ).removeClass("hide");
                $( "#pwd2").addClass("wrong-input");
            }else{
                $( "#tipNotSamePwd" ).addClass("hide");
                $( "#pwd2" ).removeClass("wrong-input");           
            }
        };

        var ensureResetEnable = function() {
            var s = true;
            var pwd1 = $.trim( $( "#pwd1" ).val() );
            var pwd2 = $.trim( $( "#pwd2" ).val() );
            if ( pwd1.length == 0 || pwd2.length == 0) {
                s = false;
            }
            if ( pwd1 !== pwd2 ){
                s = false;
            }
            if (s) {
                $("#resetBtn").removeClass("disabled");
            } else {
                $("#resetBtn").addClass("disabled");
            }
        };

        $("#pwd1").bind("input", function() {
            ensureResetEnable();
            ensureSamePwd();
            ensurePwdEnable()
        });

        $("#pwd2").bind("input", function() {
            ensureResetEnable();
            ensureSamePwd();
        });
        $("#resetBtn").bind("click", function(){
            var pwd1 = $.trim( $( "#pwd1" ).val() );
            var pwd2 = $.trim( $( "#pwd2" ).val() );
            var hash_password1 = CryptoJS.SHA1(pwd1);
            var hash_password2 = CryptoJS.SHA1(pwd2);
            var order_email = window[ 'geohey_order_email' ];
            var order_key = window[ 'geohey_order_key' ];
            var params = 'order_email=' + order_email + '&order_key='+ order_key + '&hash_password1=' + hash_password1 + '&hash_password2=' + hash_password2;
            $.ajax({
                type: 'POST',
                url: '/op/reset_pwd',
                contentType: "application/x-www-form-urlencoded",
                data: params,
                success: function(data){
                    if (data.length > 0) {
                        showError(s);
                        $('.noty_message').removeClass('success');
                        $('.noty_message').addClass('error');
                        $("#resetBtn").removeClass("disabled");
                    } else {
                        showInfo("您已成功重置密码，稍后跳转到登录页面");
                        $('.noty_message').removeClass('error');
                        $('.noty_message').addClass('success');
                        setTimeout(function() {
                            location.href = "/sign"
                        }, 3e3)
                    }
                },
                error: function(){
                    $("#resetBtn").removeClass("disabled");
                }
            });
        });
        var message = undefined;
        function showInfo(e, t) {
            message = noty({
                text: e,
                type: "information",
                layout: "topCenter",
                template: '<div class="noty_message noty_message_info"><span class="noty_text"></span><div class="noty_close"></div></div>',
                killer: true,
                callback: {
                    afterShow: function() {
                        if (t) {
                            var e = this;
                            setTimeout(function() {
                                e.close()
                            }, 3e3)
                        }
                    }
                }
            })
        }
        function showError(e, t) {
            message = noty({
                text: e,
                type: "error",
                layout: "topCenter",
                killer: true,
                template: '<div class="noty_message noty_message_error"><span class="noty_text"></span><div class="noty_close"></div></div>',
                callback: {
                    afterShow: function() {
                        if (t) {
                            var e = this;
                            setTimeout(function() {
                                e.close()
                            }, 3e3)
                        }
                    }
                }
            })
        }

        window[ 'page' ] = JSON.parse('{{page}}'.replace(/&quot;/g,'"'));
            
        if(window[ 'page'] && window[ 'page' ].title && window[ 'page' ].title!==''){
            document.title = window[ 'page' ].title;
        }
        if(window[ 'page' ] && window[ 'page' ].icon && window[ 'page' ].icon!==''){
            document.querySelector('[rel=icon]').setAttribute('href', window[ 'page' ].icon);
        }
    </script>
</body>
</html>